<template>
  <div class="transfer-container" v-loading="isLoading">
    <div class="check-container">
      <div class="check-all-container">
        <el-checkbox v-model="isLeftCheckedAll" :indeterminate="isLeftIndeterminate" @change="handelLeftCheckedAll"
          >可选属性({{ leftSelected.length }}/{{ cloneLeftList.length }}项)</el-checkbox
        >
      </div>
      <div class="list-container">
        <div class="search-box">
          <el-input v-model="searchVal" placeholder="请输入关键词" :suffix-icon="Search" @change="handleLeftSearch"> </el-input>
        </div>
        <template v-if="leftList.length">
          <div class="left-list-content">
            <div class="list-container-item" :class="{ 'item-active': item.checked }" v-for="item in leftList">
              <el-checkbox
                v-model="item.checked"
                :label="item.label"
                :value="item.value"
                :key="item.value"
                @change="handleLeftChecked($event, item)"
              >
                {{ item.label }}
              </el-checkbox>
            </div>
          </div>
        </template>
        <el-empty v-else />
      </div>
    </div>
    <div class="center-buttons">
      <el-button @click="handelTransferShow" :disabled="!leftSelected.length"
        >显示<el-icon><ArrowRightBold /></el-icon>
      </el-button>
      <el-button @click="handelTransferHide" :disabled="!rightSelected.length"
        >隐藏<el-icon><ArrowLeftBold /></el-icon
      ></el-button>
    </div>
    <div class="check-container">
      <div class="check-all-container">
        <el-checkbox v-model="isRightCheckedAll" :indeterminate="isRightIndeterminate" @change="handelRightCheckedAll"
          >已选属性({{ rightSelected.length }}/{{ rightList.length }}项)</el-checkbox
        >
      </div>
      <div class="list-container">
        <VueDraggableNext
          v-if="rightList.length"
          class="dragArea"
          id="tabsContainer"
          v-model="rightList"
          chosenClass="chosenClass"
          :animation="500"
          :capture="true"
          handle=".drag-handle"
          :move="onMoveRight"
        >
          <div class="list-container-item" :class="{ 'item-active': item.checked }" v-for="item in rightList">
            <el-checkbox
              v-model="item.checked"
              :label="item.label"
              :value="item.value"
              :key="item.value"
              @change="handleRightChecked($event, item)"
            >
              {{ item.label }}
            </el-checkbox>
            <img class="drag-handle" :src="require('@/assets/images/image/drag-handle.png')" />
          </div>
        </VueDraggableNext>
        <el-empty v-else />
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, ref } from "vue";
import { ArrowLeftBold, ArrowRightBold, Search } from "@element-plus/icons-vue";
import { VueDraggableNext } from "vue-draggable-next";
import { cloneDeep } from "lodash";
import { allFieldList } from "@/apis/groups";
import { ElMessage } from "element-plus";

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  }
});
const emit = defineEmits(["update:modelValue"]);
const rightList = computed({
  get() {
    return props.modelValue;
  },
  set(val) {
    emit("update:modelValue", val);
  }
});

const cloneLeftList = ref([]);
const isLoading = ref(false);
const getAllField = async () => {
  try {
    isLoading.value = true;
    const { data } = await allFieldList();
    leftList.value = data || [];
    cloneLeftList.value = cloneDeep(leftList.value);
    isLoading.value = false;
  } catch (err) {
    isLoading.value = false;
  }
};

/**
 * 源数据
 */
const isLeftCheckedAll = ref(false);
const isLeftIndeterminate = ref(false);
const leftList = ref([]);
const leftSelected = ref([]);
const handelLeftCheckedAll = e => {
  isLeftIndeterminate.value = e && false;
  leftList.value.forEach(item => {
    item.checked = e;
  });
  leftSelected.value = e ? cloneDeep(leftList.value) : [];
};
const handleLeftChecked = (e, data) => {
  if (e) {
    const isCheckedAll = leftList.value.every(item => item.checked);
    isLeftIndeterminate.value = !isCheckedAll;
    isLeftCheckedAll.value = isCheckedAll;
    //isCheckedAll:仅针对于搜索结果全选
    if (isCheckedAll) {
      if (leftList.value.length === cloneLeftList.value.length) {
        // 所有列表全选
        leftSelected.value = cloneDeep(leftList.value);
      } else {
        //所有列表未全选
        leftSelected.value.push(cloneDeep(data));
      }
    } else {
      leftSelected.value.push(cloneDeep(data));
    }
  } else {
    isLeftIndeterminate.value = leftList.value.some(item => item.checked);
    isLeftCheckedAll.value = false;
    const dataIndex = leftSelected.value.findIndex(item => item.fieldId === data.fieldId);
    dataIndex !== -1 && leftSelected.value.splice(dataIndex, 1);
  }
};
//搜索
const searchVal = ref("");
const handleLeftSearch = () => {
  const currentSearchVal = searchVal.value.trim();
  if (currentSearchVal) {
    leftList.value = cloneLeftList.value.filter(item => item.label.includes(currentSearchVal));
  } else {
    leftList.value = cloneLeftList.value;
  }
};

/**
 * 已选择
 */
const isRightCheckedAll = ref(false);
const isRightIndeterminate = ref(false);
const rightSelected = ref([]);
const handelRightCheckedAll = e => {
  isRightIndeterminate.value = e && false;
  rightList.value.forEach(item => {
    item.checked = e;
  });
  rightSelected.value = e ? cloneDeep(rightList.value).filter(item => item.checked) : [];
};
const handleRightChecked = (e, data) => {
  if (e) {
    const isCheckedAll = rightList.value.every(item => item.checked);
    isRightIndeterminate.value = !isCheckedAll;
    isRightCheckedAll.value = isCheckedAll;
    if (isCheckedAll) {
      rightSelected.value = cloneDeep(rightList.value);
    } else {
      rightSelected.value.push(cloneDeep(data));
    }
  } else {
    isRightIndeterminate.value = rightList.value.some(item => item.checked);
    isRightCheckedAll.value = false;
    const dataIndex = rightSelected.value.findIndex(item => item.value === data.value);
    dataIndex !== -1 && rightSelected.value.splice(dataIndex, 1);
  }
};
const onMoveRight = e => {
  return ![0].includes(e.relatedContext.index);
};

/**
 * 显示/隐藏
 */
const handelTransferShow = () => {
  console.log(leftSelected.value)
  const filterData = rightList.value.filter(item => leftSelected.value.some(listItem => listItem.value === item.value));
  if(filterData.length){
   return  ElMessage({
      message: '请勿重复添加',
      type: 'error',
    })
  }
  const listData = cloneDeep(leftSelected.value).map(item => {
    item.checked = false;
    return item;
  });
  rightList.value = [...rightList.value, ...listData];
  leftSelected.value = [];
  isLeftCheckedAll.value = false;
  isLeftIndeterminate.value = false;
  if (listData.length === leftList.value.length) {
    leftList.value = [];
  } else {
    leftList.value = leftList.value.filter(item => !listData.some(listItem => listItem.value === item.value));
  }
  cloneLeftList.value = cloneLeftList.value.filter(item => !listData.some(listItem => listItem.value === item.value));
  searchVal.value = "";
  handleLeftSearch();
};
const handelTransferHide = () => {
  const listData = cloneDeep(rightSelected.value).map(item => {
    item.checked = false;
    return item;
  });
  leftList.value = [...leftList.value, ...listData];
  rightSelected.value = [];
  isRightCheckedAll.value = false;
  isRightIndeterminate.value = false;
  if (listData.length === rightList.value.length) {
    rightList.value = [];
  } else {
    rightList.value = rightList.value.filter(item => !listData.some(listItem => listItem.value === item.value));
  }
  cloneLeftList.value = [...cloneLeftList.value, ...listData];
  searchVal.value = "";
  handleLeftSearch();
};

getAllField();
</script>

<style scoped lang="scss">
@use "@/assets/styles/mixin";

.transfer-container {
  @include mixin.flex-align;
  margin-bottom: 30px;

  .check-container {
    @include mixin.flex-column;
    width: 45%;
    height: 660px;
    border-radius: 6px;
    border: 1px solid #dcdcdc;
    position: relative;
    .search-box {
      width: calc(100% - 20px);
      position: absolute;
      left: 10px;
      z-index: 99;
    }
  }

  .check-all-container {
    @include mixin.flex-align;
    height: 48px;
    padding: 0 16px;
    //border-bottom: 1px solid #E7E7E7;
  }

  .list-container {
    flex: 1;
    padding: 0 8px 30px 8px;
    overflow-y: auto;
    .left-list-content {
      padding-top: 30px;
    }
    &-item {
      @include mixin.flex-between;
      @include mixin.flex-align;
      margin-top: 10px;
      padding: 0 8px;
    }
    .item-active {
      background-color: #f2f3ff;
      border-radius: 3px;
    }
    .drag-handle {
      width: 16px;
      height: 16px;
      cursor: pointer;
    }
    .el-input {
      width: calc(100% + 20px);
      position: relative;
      left: -10px;
      border: none;
    }
  }
  :deep(.el-checkbox) {
    display: inline-flex;
    height: auto;
  }
  :deep(.el-checkbox__label) {
    //width: 100px;
    //overflow: hidden;
    //white-space: nowrap;
    //text-overflow: ellipsis;
    white-space: wrap;
    line-height: 1.3;
  }

  .center-buttons {
    @include mixin.flex-center;
    flex-direction: column;
    gap: 10px;
    margin: 0 12px;

    :deep(.el-button) {
      margin-left: 0;
    }
  }
}

:deep(.el-empty__image) {
  width: 60%;
}
</style>
